<div style="padding: 16px;">

    <!-- 内容主体区域  面包屑-->
    <span class="layui-breadcrumb">
          <a><cite>首页</cite></a>
          <a><cite>用户管理</cite></a>
          <a><cite>员工管理</cite></a>
    </span>

    <!-- 水平线 -->
    <hr class="layui-bg-blue">

    <!-- 搜索条件 -->
    <fieldset class="layui-elem-field">
        <legend>筛选条件</legend>
        <div class="layui-field-box">
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="search_username" placeholder="请输入用户名" class="layui-input">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                    <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                    <button class="layui-btn layui-btn-radius layui-btn-success" id="insertData">新增用户
                    </button>
                </div>
            </div>
        </div>
    </fieldset>

    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="insert_form">
        <div class="layui-field-box">
            <form class="layui-form" action="">
                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_username" class="layui-input" placeholder="请输入用户名">
                    </div>
                </div>

                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <!-- 修改这里，将输入框改为 layui 美化的下拉框 -->
                        <select id="insert_gender">
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_department" class="layui-input" placeholder="请输入部门">
                    </div>
                </div>
                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_hire_date" class="layui-input" placeholder="选择入职时间"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">离职时间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_leave_date" class="layui-input" placeholder="选择离职时间"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_phone_number" class="layui-input"
                               placeholder="请输入手机号码">
                    </div>
                </div>

                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select id="insert_status">
                            <option value="">请选择状态</option>
                            <option value="0">可用</option>
                            <option value="1">已禁用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form layui-form-item layui-form-pane">
                    <label class="layui-form-label">家庭住址</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_address" class="layui-input" placeholder="请输入家庭住址">
                    </div>
                </div>
            </form>
        </div>
    </script>

</div>

<script>
    function flushTable() {
        tableflush()
    }

    $("#searchVal").click(function () {
        let search_username = $("#search_username").val();
        tableflush(search_username);
    });

    $("#iReset").click(function () {
        $("#search_username").val('');
        tableflush();
    });

    $("#insertData").click(function () {
        layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            , title: '新增用户' //不显示标题栏
            , closeBtn: false
            , area: ['500px', '500px']  // 宽和高
            , shade: 0.5
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['新增', '取消']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $('#insert_form').html()         // 引入自定义表单
            , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let username = $("#insert_username").val();
                let gender = $("#insert_gender").val();
                let department = $("#insert_department").val();
                let hire_date = $("#insert_hire_date").val();
                let leave_date = $("#insert_leave_date").val();
                let phone_number = $("#insert_phone_number").val();
                let status = $("#insert_status").val();
                let address = $("#insert_address").val();
                // layer.msg("username=" + username + "  password=" + password);
                $.ajax({
                    url: "/employee",           // 请求路径
                    type: "post",                  // 请求的方式，不区分大小写
                    cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        username: username,
                        gender: gender,
                        department: department,
                        hireDate: hire_date,
                        leaveDate: leave_date,
                        phoneNumber: phone_number,
                        status: status,
                        address: address
                    }),
                    datatype: "json",        // 返回类型，text文本、html页面、json数据
                    success: function (response) {
                        console.log("返回: " + response);
                        if (response.code === 0) {
                            layer.msg('操作成功', {icon: 1});
                            layer.close(index);                         // 关闭当前窗口
                            flushTable()
                        } else {
                            layer.msg("操作失败！", {icon: 2});
                        }
                    },
                    error: function (response) {
                        console.log("出错返回: " + response);
                        layer.msg("操作失败！", {icon: 2});
                    }
                });
            }
            , success: function (layero) {
                var laydate = layui.laydate;

                laydate.render({
                    elem: '#insert_hire_date'
                });

                laydate.render({
                    elem: '#insert_leave_date'
                });

                layui.use('form', function () {
                    var form = layui.form;
                    form.render();
                });
            }
        });
    });

    function tableflush(search_username) {
        let param = {};
        if (search_username === undefined || search_username === null)
            search_username = '';
        param.username = search_username;              // {name:''}

        layui.use(function () {
            var table = layui.table;
            var laydate = layui.laydate;

            table.render({
                elem: '#test'
                , url: 'employee'
                , where: param
                , height: 'full-300'
                , toolbar: '#toolbarDemo'                          //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports']
                , title: '用户数据表'
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID'}
                    , {field: 'username', title: '用户名'}
                    , {field: 'gender', title: '性别'}
                    , {field: 'department', title: '部门'}
                    , {field: 'hireDate', title: '入职时间'}
                    , {field: 'leaveDate', title: '离职时间'}
                    , {field: 'phoneNumber', title: '手机号码'}
                    , {
                        title: '状态', templet: function (res) {
                            if (res.status == 0)
                                return '可用';
                            else
                                return '已禁用';
                        }
                    }
                    , {field: 'address', title: '家庭住址'}
                    // ,{title:'密码', templet: function(res){
                    //         return '<em>'+ res.password +'</em>'
                    //     }}
                    , {title: '操作', toolbar: '#barDemo'}
                ]]
                , page: true
                , limits: [5, 10, 15, 20]
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
                ;
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('确定删除该行吗？', function (index) {

                        $.ajax({
                            url: "/employee/" + data.id,           // 请求路径
                            type: "delete",                  // 请求的方式，不区分大小写
                            cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            contentType: "application/json;charset=utf-8",
                            data: {},
                            datatype: "json",        // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                console.log("返回: " + response);
                                if (response.code === 0) {
                                    layer.msg('操作成功', {icon: 1});   // 关闭当前窗口
                                    obj.del();
                                } else {
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                                layer.msg("操作失败！", {icon: 2});
                            }
                        });

                    });
                } else if (obj.event === 'edit') {
                    layer.open({     // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '编辑用户' //不显示标题栏
                        , closeBtn: false
                        , area: ['500px', '500px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['保存', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#insert_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                            // layer.msg("新增按钮执行");
                            let id = data.id;
                            let username = $("#insert_username").val();
                            let gender = $("#insert_gender").val();
                            let department = $("#insert_department").val();
                            let hire_date = $("#insert_hire_date").val();
                            let leave_date = $("#insert_leave_date").val();
                            let phone_number = $("#insert_phone_number").val();
                            let status = $("#insert_status").val();
                            let address = $("#insert_address").val();
                            // layer.msg("username=" + username + "  password=" + password);
                            $.ajax({
                                url: "/employee",           // 请求路径
                                type: "put",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    id: id,
                                    username: username,
                                    gender: gender,
                                    department: department,
                                    hireDate: hire_date,
                                    leaveDate: leave_date,
                                    phoneNumber: phone_number,
                                    status: status,
                                    address: address
                                }),
                                datatype: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 0) {
                                        layer.msg('操作成功', {icon: 1});
                                        layer.close(index);                         // 关闭当前窗口
                                        flushTable();
                                    } else {
                                        layer.msg("操作失败！", {icon: 2});
                                    }
                                },
                                error: function (response) {
                                    console.log("出错返回: " + response);
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            });
                        }
                        , success: function (layero) {
                            laydate.render({
                                elem: '#insert_hire_date'
                            });

                            laydate.render({
                                elem: '#insert_leave_date'
                            });

                            // 获取当前行的数据
                            let id = data.id;
                            let username = data.username;
                            let gender = data.gender;
                            let department = data.department;
                            let hire_date = data.hireDate;
                            let leave_date = data.leaveDate;
                            let phone_number = data.phoneNumber;
                            let status = data.status;
                            let address = data.address;

                            // 填充表单字段
                            $("#insert_username").val(username);
                            $("#insert_gender").val(gender);
                            $("#insert_department").val(department);
                            $("#insert_hire_date").val(hire_date);
                            $("#insert_leave_date").val(leave_date);
                            $("#insert_phone_number").val(phone_number);
                            $("#insert_status").val(status);
                            $("#insert_address").val(address);


                            layui.form.render();
                        }
                    });
                } else if (obj.event === 'new') {
                    layer.msg('自定义按钮触发 data=' + JSON.stringify(data));
                }
            });

        });
    }

    tableflush();
</script>

